/**
* Create by mzq
* Description: 患者信息区域
* Date: 2025/2/13 16:52
* Update: 2025/2/13 16:52
*/


<template>
  <section class="patient-section">
    <div class="patient-info-title">病人基础信息</div>

    <div class="patient-info" v-if="patientInfo">
      <div
        v-for="(item, index) in patientInfoItems"
        :key="index"
        :class="['info-item', item.class]">
        <div class="label">{{ item.label }}</div>
        <div class="value">{{ patientInfo[item.field] }}</div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: 'PatientInformationArea',
  
  props: {
    patientInfo: {
      type: Object,
      default: null
    }
  },
  
  data() {
    return {
      patientInfoItems: [
        { label: '姓名', field: 'name', class: 'name' },
        { label: '年龄', field: 'age', class: 'age' },
        { label: '性别', field: 'sex', class: 'sex' },
        { label: '住院号', field: 'admissionNumber', class: 'admissionNumber' },
        { label: '住院科室', field: 'Department', class: 'Department' },
        { label: '初步诊断', field: 'diagnosis', class: 'diagnosis' },
      ]
    }
  }
}
</script>

<style scoped lang="scss">
.patient-info-title {
  box-sizing: border-box;
  color: #6df7be;
  font-size: 20px;
  padding: 20px 40px;
  font-weight: bold;
}

.patient-section {
  .patient-info {
    padding-top: 10px;
    padding-left: 80px;
    color: #fff;
    display: flex;
    flex-wrap: wrap;

    .info-item {
      display: flex;
      flex-direction: column;
      gap: 8px;

      .label {
        color: #6df7be;
        font-size: 10px;
      }

      .value {
        color: #fff;
        font-size: 20px;
      }
    }

    .name {
      box-sizing: border-box;
      width: 100px;
    }

    .age {
      box-sizing: border-box;
      width: 125px;
      text-align: center;
    }

    .sex {
      box-sizing: border-box;
      width: 108px;
      text-align: center;
    }

    .admissionNumber {
      box-sizing: border-box;
      width: 175px;
      padding-left: 30px;
    }

    .Department {
      box-sizing: border-box;
      width: 160px;
      text-align: center;
    }

    .diagnosis {
      box-sizing: border-box;
      padding-left: 20px;
    }
  }
}
</style>